<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getUserInfo, upd } from "../../services/user";
import { upload } from "../../services/upload";
const router = useRouter();
const onClickLeft = () => {
  router.push("/main/owner");
};
//用户信息
const userData = ref({
  fullName: "",
  phone: "",
  age: "",
  gender: 1,
  address: "",
  headPic: "",
  fileList: [],
});
const userInfoGet = () => {
  getUserInfo()
    .then((res) => {
      userData.value = res.data;
      userData.value.fileList = [
        {
          url: userData.value.headPic,
        },
      ];
    })
    .catch((err) => {});
};
//上传
const afterRead = (file) => {
  file.status = "uploading";
  file.message = "上传中...";
  var formData = new FormData();
  formData.append("file", file.file);
  formData.append("filePath", "file/");
  upload(formData)
    .then((res) => {
      userData.value.fileList = [
        {
          url: res.data,
        },
      ];
      userData.value.headPic = res.data;
    })
    .catch((error) => {});
};
//修改
const submit = () => {
  upd(userData.value)
    .then((res) => {
      if (res.data) {
        showNotify({
          message: "修改成功",
          color: "#ad0000",
          background: "#ffe1e1",
        });
        let userInfo = JSON.parse(localStorage.getItem("userData"));
        userInfo.headPic = userData.value.headPic;
        userInfo.fullName = userData.value.fullName;
        //修改成功
        userData.value.fileList = [
          {
            url: userData.value.headPic,
          },
        ];
        localStorage.setItem("userData", JSON.stringify(userInfo));
      }
    })
    .catch((err) => {});
};
const onOversize = (file) => {
  showToast("文件大小不能超过 10M");
};
// 返回布尔值
const beforeRead = (file) => {
  if (file.type !== "image/jpeg" && file.type !== "image/png") {
    showToast("请上传 jpg/png格式图片");
    return false;
  }
  return true;
};
onMounted(() => {
  userInfoGet();
});
</script>
<template>
  <div class="info">
    <div>
      <van-nav-bar title="用户信息" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="configuration">
      <div class="configuration_info">
        <van-form>
          <van-cell-group inset>
            <van-field
              v-model="userData.fullName"
              name="姓名"
              label="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="userData.phone"
              name="电话"
              label="电话"
              :rules="[{ required: true, message: '请填写电话' }]"
            />
            <van-field v-model="userData.age" name="年龄" label="年龄" />
            <van-field name="radio" label="性别">
              <template #input>
                <van-radio-group v-model="userData.gender" direction="horizontal">
                  <van-radio :name="1">男</van-radio>
                  <van-radio :name="0">女</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field v-model="userData.address" name="地址" label="地址" />
            <van-field name="uploader" label="头像">
              <template #input>
                <van-uploader
                  :after-read="afterRead"
                  v-model="userData.fileList"
                  :before-read="beforeRead"
                  multiple
                  :max-count="1"
                  :max-size="10 * 1024 * 1024"
                />
              </template>
            </van-field>
          </van-cell-group>
        </van-form>
      </div>
    </div>
    <div class="button">
      <van-button
        @click="submit"
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        round
        block
        type="primary"
        native-type="submit"
      >
        修改
      </van-button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.info {
  display: flex;
  height: 100%;
  flex-direction: column;
  :deep(.van-nav-bar__content) {
    height: 66px;
  }
  background-color: rgb(244, 247, 252);
  .configuration {
    height: 100%;
    position: relative;
    .configuration_info {
      position: absolute;
      top: 1%;
      width: 92%;
      height: auto; /* 白色框占用的高度 */
      background-color: white;
      left: 50%;
      transform: translateX(-50%); /* 水平居中 */
      justify-content: center;
      border-radius: 5px; /* 如果需要圆角，可以设置 */
      z-index: 2; /* 确保在bottom_owner之下 */
    }
  }
  .button {
    display: flex;
    width: 100%;
    margin-bottom: 5%;
    justify-content: center; /* 水平居中对齐 */
    .van-button {
      width: 90%;
    }
  }
}
</style>
